@import '../../../../styles/base.scss';
@import '../../../../styles/style.scss';

.preShow {
  position: relative;
  height: 260px;
  border-radius: 20px;
  padding: 20px 50px;
  // box-shadow: 0 0 18px #000 inset;
  background-color: $themeColor1;
  margin-top: $space;
  @extend .trans;

  .closeBtn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: $themeColor2;
    @extend .hover;
  }

  .preMarked {
    width: 100%;
    height: 100%;
    padding: 0px 10px;
    overflow-y: auto;
    word-break: break-all;
  }
  .preMarked::-webkit-scrollbar {
    width: 8px;
  }
  .preMarked::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
  }
  .preMarked::-webkit-scrollbar-thumb {
    background-color: $themeColor2;
    border-radius: 4px;
  }
  .preMarked::-webkit-scrollbar-thumb:hover {
    background-color: $hoverColor;
  }
}

@media screen and (max-width: 1240px) {
  .preShow {
    height: 140rem;
    border-radius: 8rem;
    padding: 8rem 20rem;
    margin-top: 8rem;

    .closeBtn {
      right: 5rem;
      top: 5rem;
      width: 26rem;
      height: 26rem;
      font-size: 18rem;
    }

    .preMarked {
      padding: 0rem 10rem;
      font-size: 16rem;
    }
  }
}
